<!-- 商城 - 单元格按钮组件 -->
<template>
	<view
		v-if="data.list && data.list.length > 0"
		:style="{
			margin: data.margin
		}"
	>
		<view :style="{ borderRadius: data.borderRadius, overflow: 'hidden' }">
			<u-cell-group :title="data.title" :border="data.border" :titleStyle="data.titleStyle">
				<u-cell-item
					v-for="(item, index) in data.list"
					:key="index"
					v-if="showFn(item)"
					:icon="item.icon"
					:title="item.title || ''"
					:arrow="true"
					:index="index"
					:value="item.value || ''"
					@click="click(item)"
				></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-cell-btn",
	props: {
		localdata: {
			Type: Object
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			data: {
				border: true,
				margin: "0rpx",
				borderRadius: "0rpx",
				titleStyle: {},
				title: "",
				list: []
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		click(item) {
			this.$emit("click", item);
		},
		showFn(item){
			if (typeof item.show === "undefined") {
				return true;
			}
			if (typeof item.show === "boolean") {
				return item.show;
			}
			if (typeof item.show === "number") {
				return item.show > 0 ? true : false;
			}
			if (typeof item.show === "function") {
				return item.show();
			}
			return false;
		}
	},
	// 监听器
	watch: {
		localdata: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				Object.assign(this.data, newVal);
			}
		}
	},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.icon-box {
	border: 0px solid #007aff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.grid-text {
	font-size: 24rpx;
}
.image-icon {
	border-radius: 50%;
}
</style>
